<template>
  <out-line
    :position="position"
    :id="element.id"
    class="person-info"
    :padding="0"
    :width="400"
    :height="0"
    @closeLayer="closeLayer"
  >
    <div class="info">
      <Title title="敏感点信息" />
      <div class="grid">
        <div class="item box">
          <Info labelWidth="114" label="名称" :value="element.name" />
        </div>
        <div class="item box">
          <Info labelWidth="114" label="类别" :value="element.type_dictText" />
        </div>
        <div class="item box border">
          <Info labelWidth="114" label="规模" :value="element.scale_dictText" />
        </div>
      </div>
    </div>
  </out-line>
</template>
<script>
  import Title from '@comp/gis/title'
  import OutLine from '@comp/gis/outline'
  import Info from '@comp/gis/info'
  import {mapActions, mapState} from 'vuex'

  export default {
  components: {
    Title,
    OutLine,
    Info,
  },
  props: {
    element: {
      type: Object,
      default: () => {},
    },
    position: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['fposition']),
  },
  methods: {
    ...mapActions(['deleteLayers', 'addDLayers']),
    //关闭图层
    closeLayer() {
      this.deleteLayers(this.element.id)
    },
  },
}
</script>
<style lang="less" scoped>
.info {
  padding-top: 12px;
  .grid {
    margin: 20px 21px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      border: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: none;
    }
    .box{
        width: 100%;
    }
    .border {
      border-top: none;
    }
    .item-right{
      border-right: none;
    }
  }
}
</style>